<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${controller.appConfig.mapKey}"></script>
    <script type="text/javascript" src="${contextPath}/static/tool/jquery/jquery-1.8.0.min.js"></script>
</head>
<body>
<div id="allmap"></div>
</body>
<script type="text/javascript">
    var point = <#if lng?? && lat??>new BMap.Point(${lng}, ${lat});<#else>false;</#if>
    var map = new BMap.Map("allmap");
    if(point) {
        map.centerAndZoom(point, 15);
        map.addOverlay(new BMap.Marker(point));
    } else {
        map.centerAndZoom(new BMap.Point(109.369334, 38.16197), 5);  // 初始化地图,设置中心点坐标和地图级别
    }
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.setCurrentCity("西安");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var convertor = new BMap.Convertor();
    var pointList = new Array();
    var i;
    function addMarker(list) {
        clearInterval(i);
        pointList.length = 0;
        map.clearOverlays();
        pointListInfo(list);
        setTimeout(function () {
            $.each(pointList, function (index, point) {
                if (index != 0) {
                    var polyline = new BMap.Polyline([
                        point,
                        pointList[index - 1]
                    ], {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5});   //创建折线
                    map.addOverlay(polyline);   //增加折线
                }

                var marker = new BMap.Marker(point);
                map.addOverlay(marker);

                if (index + 1 == pointList.length) {
                    marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                    map.centerAndZoom(point, 15);
                }
            })
        }, 1000)
    }
    function dynamicMarker(list, td, s) {
        td.hide();
        clearInterval(i);
        pointList.length = 0;
        map.clearOverlays();
        pointListInfo(list);
        var index = 0;
        setTimeout(function () {
            td.show();
            i = setInterval(function () {
                map.centerAndZoom(pointList[index], 16);
                if (index != 0) {
                    var polyline = new BMap.Polyline([
                        pointList[index],
                        pointList[index - 1]
                    ], {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5});   //创建折线
                    map.addOverlay(polyline);   //增加折线
                }
                var marker = new BMap.Marker(pointList[index]);
                map.addOverlay(marker);

                if (index + 1 == pointList.length) {
                    marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                    clearInterval(i);
                }
                index++;
            }, 200 / s)
        }, 1000)
    }
    function pointListInfo(list) {
        var pointArr = [];
        $.each(list, function (index, coor) {
            var point = new BMap.Point(coor.lng, coor.lat);
            pointArr.push(point);
            if (pointArr.length == 10 || index + 1 == list.length) {
                convertor.translate(pointArr, 1, 5, translateCallback)
                pointArr.length = 0;
            }
        });
    }
    function translateCallback(data) {
        $.each(data.points, function (index, point) {
            pointList.push(point)
        })
    }

</script>
</html>